<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<title>外卖</title>
		<link rel="stylesheet" type="text/css" href="{php echo $this->cur_mobile_path}/css/api.css" />
		<link rel="stylesheet" type="text/css" href="{php echo $this->cur_mobile_path}/css/common.css" />
		<link rel="stylesheet" type="text/css" href="{php echo $this->cur_mobile_path}/css/goods.css" />
		<link rel="stylesheet" type="text/css" href="{php echo $this->cur_mobile_path}/css/fakeLoader.css">
		<style>
			.ziyou-open {
				overflow: hidden
			}
			
			.ziyou {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 1050;
				display: none;
				overflow: hidden;
				-webkit-overflow-scrolling: touch;
				outline: 0
			}
			
			.ziyou.fade .ziyou-dialog {
				-webkit-transition: -webkit-transform .3s ease-out;
				-o-transition: -o-transform .3s ease-out;
				transition: transform .3s ease-out;
				-webkit-transform: translate(0, -25%);
				-ms-transform: translate(0, -25%);
				-o-transform: translate(0, -25%);
				transform: translate(0, -25%)
			}
			
			.ziyou.in .ziyou-dialog {
				-webkit-transform: translate(0, 0);
				-ms-transform: translate(0, 0);
				-o-transform: translate(0, 0);
				transform: translate(0, 0)
			}
			
			.ziyou-open .ziyou {
				overflow-x: hidden;
				overflow-y: auto
			}
			
			.ziyou-dialog {
				position: relative;
				width: auto;
				margin: 0px
			}
			
			@media (min-width:768px) {
				.ziyou-dialog {
					width: 600px;
					margin: 30px auto
				}
				.ziyou-sm {
					width: 300px
				}
			}
			
			@media (min-width:992px) {
				.ziyou-lg {
					width: 900px
				}
			}
			
			.ziyou-content {
				background-color: #fff;
			}
			
			.ziyou-header {
				min-height: 16.43px;
				padding: 15px;
				border-bottom: 1px solid #e5e5e5
			}
			
			.ziyou-header .close {
				margin-top: 0px
			}
			
			.ziyou-title {
				margin: 0;
				line-height: 1.42857143
			}
			
			.ziyou-body {
				position: relative;
				padding: 15px
			}
			
			.ziyou-footer {
				padding: 15px;
				text-align: right;
				border-top: 1px solid #e5e5e5
			}
			
			.ziyou-footer .btn+.btn {
				margin-bottom: 0;
				margin-left: 5px
			}
			
			.ziyou-footer .btn-group .btn+.btn {
				margin-left: -1px
			}
			
			.ziyou-footer .btn-block+.btn-block {
				margin-left: 0
			}
			
			.ziyou-scrollbar-measure {
				position: absolute;
				top: -9999px;
				width: 50px;
				height: 50px;
				overflow: scroll
			}
			
			.ziyou-tc {
				width: 35px;
				height: 35px;
				margin: 15px;
				background-image: url("image/x.png");
				/*设定TRBL*/
				position: absolute;
				left: 0px;
				top: 0px;
			}
				/* 自定义商品组页css ¼*/
.ziyouzuo{
	float: left; width: 50%; 
	padding-left: 8px;
	padding-right: 8px;
}
.ziyoutb{
	  margin-right: 8px;
    padding-top: 3px;
}
.ziyoujg{
    padding-top: 3px;
}
		</style>
		<script src="{php echo $this->cur_mobile_path}/script/jquery-1.8.3.min.js"></script>
	</head>

	<body>
		<div class="fakeloader"></div>

		<div id="wrap1">
			<div id="header">
				<div class="back">
					<i class="i-back"></i>
				</div>
				<div class="flex-full"></div>
				<div class="search">
					<i class="i-search"></i>
				</div>
				<div class="favorite">
					<i class="i-share"></i>
				</div>
			</div>
			
<!--单图排列-->
<div class="fui-picture" style="margin-top: 45px;">
	<a href="javascript:;" data-nocache="true">
		<img src="http://weixin.lolse.com/addons/ewei_shopv2/plugin/diypage/static/images/default/banner-1.jpg">
	</a>
</div>
			<div id="mainwrap" class="mainwrap" style="margin-left:0px; margin-top: -3px;"> 
				<div class="foodlistwrap">
					<ul>
						<li class="j-fooditem fooditem ziyouzuo">
							<div class="food-content1 clearfix">
								<div class="food-pic-wrap" data-toggle="modal" data-target="#myModal">
									<img class="j-food-pic food-pic" src="http://www.17sucai.com/preview/10221/2017-11-17/miboo/themes/img/pd/sf-15.jpg" visibility="hidden">
								</div>
								<div class="food-cont">
									<div class="j-foodname foodname" data-toggle="modal" data-target="#myModal">辣子鸡饭辣子鸡饭辣子鸡饭辣子鸡饭</div>
									<div class="j-item-console foodop clearfix">
										<a class="j-add-item add-food ziyoutb" href="javascript:;">
											<i class="icon i-add-food j-add-inner"></i>
										</a>
										<span class="j-item-num foodop-num ziyoutb" style="display:none">0</span>
										<a class="j-remove-item remove-food ziyoutb" style="display:none" href="javascript:;">
											<i class="icon i-remove-food"></i>
										</a>
									</div>
									<div class="food-content1-sub " data-target="#full">                            
                      <span>已售 888</span>
                      <span class="food-good">赠送<f style="color: #f00;"></f>积分</span>
                  </div>
									<div class="food-price-region">
										<span class="food-price ziyoujg" data-toggle="modal" data-target="#myModal">{$setting['currency']}<font>13</font></span>
									</div>
									
								</div>
							</div>
						</li>
						<li class="j-fooditem fooditem ziyouzuo">
							<div class="food-content1 clearfix">
								<div class="food-pic-wrap" data-toggle="modal" data-target="#myModal">
									<img class="j-food-pic food-pic" src="http://www.17sucai.com/preview/10221/2017-11-17/miboo/themes/img/pd/sf-15.jpg" visibility="hidden">
								</div>
								<div class="food-cont">
									<div class="j-foodname foodname" data-toggle="modal" data-target="#myModal">辣子鸡饭辣子鸡饭辣子鸡饭辣子鸡饭</div>
									<div class="j-item-console foodop clearfix">
										<a class="j-add-item add-food ziyoutb" href="javascript:;">
											<i class="icon i-add-food j-add-inner"></i>
										</a>
										<span class="j-item-num foodop-num ziyoutb" style="display:none">0</span>
										<a class="j-remove-item remove-food ziyoutb" style="display:none" href="javascript:;">
											<i class="icon i-remove-food"></i>
										</a>
									</div>
									<div class="food-content1-sub " data-target="#full">                            
                      <span>已售 888</span>
                      <span class="food-good">赠送<f style="color: #f00;"></f>积分</span>
                  </div>
									<div class="food-price-region">
										<span class="food-price ziyoujg" data-toggle="modal" data-target="#myModal">{$setting['currency']}<font>13</font></span>
									</div>
									
								</div>
							</div>
						</li>
						<li class="j-fooditem fooditem ziyouzuo">
							<div class="food-content1 clearfix">
								<div class="food-pic-wrap" data-toggle="modal" data-target="#myModal">
									<img class="j-food-pic food-pic" src="http://www.17sucai.com/preview/10221/2017-11-17/miboo/themes/img/pd/sf-15.jpg" visibility="hidden">
								</div>
								<div class="food-cont">
									<div class="j-foodname foodname" data-toggle="modal" data-target="#myModal">辣子鸡饭辣子鸡饭辣子鸡饭辣子鸡饭</div>
									<div class="j-item-console foodop clearfix">
										<a class="j-add-item add-food ziyoutb" href="javascript:;">
											<i class="icon i-add-food j-add-inner"></i>
										</a>
										<span class="j-item-num foodop-num ziyoutb" style="display:none">0</span>
										<a class="j-remove-item remove-food ziyoutb" style="display:none" href="javascript:;">
											<i class="icon i-remove-food"></i>
										</a>
									</div>
									<div class="food-content1-sub " data-target="#full">                            
                      <span>已售 888</span>
                      <span class="food-good">赠送<f style="color: #f00;"></f>积分</span>
                  </div>
									<div class="food-price-region">
										<span class="food-price ziyoujg" data-toggle="modal" data-target="#myModal">{$setting['currency']}<font>13</font></span>
									</div>
									
								</div>
							</div>
						</li>
					</ul>
					<!--单图排列-->
<div class="fui-picture" style="margin-top: 45px;">
	<a href="javascript:;" data-nocache="true">
		<img src="http://weixin.lolse.com/addons/ewei_shopv2/plugin/diypage/static/images/default/banner-1.jpg">
	</a>
</div>
				</div>

			</div>
			<div class="ziyou fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="ziyou-dialog" role="document" style="position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;">
					<div class="ziyou-content" style="clear:both; padding-bottom:80% ">
						<div type="button" class="ziyou-tc" data-dismiss="modal"></div>
						<img style="width: 100%; height: 100%;" src="image/sp1.jpg">
						<div class="food-cont">
							<div class="food-cont text-left">
								<h2>辣子鸡饭</h2></div>
							<div class="food-cont text-left" style="color: darkgray;">已售 2199 份</div>
							<div class="food-cont">
								<div class="col-xs-12">
									<div class="coupon-price col-xs-4">
										{$setting['currency']}<em>15</em>/元
									</div>
									<div class="col-xs-8"><img style="margin-top:22px; float:right;" src="image/yw.png"></div>
								</div>

								<div class="j-item-console foodop clearfix">
									<a class="j-add-item add-food" href="javascript:;">
										<i class="icon i-add-food j-add-inner"></i>
									</a>
									<span class="j-item-num foodop-num" style="display:none">0</span>
									<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
										<i class="icon i-remove-food"></i>
									</a>
								</div>
							</div>
						</div>

						<div class="food-cont">
							<div class="food-cont lead">
								<h2>商品描述</h2></div>
							<div class="food-cont lead">产品活动介绍+图片富文模式</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="/script/jquery.min.js"></script>
		<script src="/script/bootstrap.min.js"></script>
		<script>
			$(function() {
				$('.menu-tabs .tab3').click(function() {
					$('.menu-tabs a').removeClass('selected')
					$(this).addClass('selected')
					$('.main-tab2').css({
						"display": "none"
					});
					$('.main-tab3').css({
						"display": "block"
					});
					$('.asidewrap').css({
						"display": "none"
					});
					$('.mainwrap').css({
						"display": "none"
					});
					$('.cart').css({
						"display": "none"
					});
				});

				$('.qualification').click(function() {
					$('.detail-photo').css({
						"display": "block"
					});
					$('.detail-region').css({
						"display": "none"
					})
					$('.detail-qualification').css({
						"display": "none"
					})
					$('.main-tab3').css({
						"margin-top": "171px"
					})
				});
				$('.photo-header').click(function() {
					$('.detail-photo').css({
						"display": "none"
					});
					$('.detail-region').css({
						"display": "block"
					})
					$('.detail-qualification').css({
						"display": "block"
					})
					$('.main-tab3').css({
						"margin-top": "181px"
					})
				});

				$('.menu-tabs .tab2').click(function() {
					$('.menu-tabs a').removeClass('selected')
					$(this).addClass('selected')
					$('.main-tab2').css({
						"display": "block"
					});
					$('.main-tab3').css({
						"display": "none"
					});
					$('.asidewrap').css({
						"display": "none"
					});
					$('.mainwrap').css({
						"display": "none"
					});
					$('.cart').css({
						"display": "none"
					});
				});

				$('.menu-tabs .tab1').click(function() {
					$('.menu-tabs a').removeClass('selected')
					$(this).addClass('selected')
					$('.main-tab2').css({
						"display": "none"
					});
					$('.main-tab3').css({
						"display": "none"
					});
					$('.asidewrap').css({
						"display": "block"
					});
					$('.mainwrap').css({
						"display": "block"
					});
					$('.cart').css({
						"display": "block"
					});
				});

			});
		</script>
		<div id="cart" class="cart">
			<div class="cart-tip">
				<div class="j-cart-icon cart-icon">
					<i class="j-ico-cart ico-cart" id="add-cart"></i>
					<div class="j-cart-num cart-num">0</div>
				</div>

				<div class="j-cart-noempty cart-noempty">
					<span class="j-cart-price cart-price">共 {$setting['currency']}<font></font></span>
					<del class="j-cart-origin cart-origin"></del>
					<br>
				</div>

				<div class="j-cart-empty cart-empty" style="display: block;">购物车空空如也～</div>
			</div>
			<div class="cart-btns" style="display:none">
				<a class="cart-btn-unavail" href="javascript:;">
					<span class="combtn inner">休息中</span>
				</a>
			</div>
			<div class="cart-btns" style="">
				<a class="j-cart-btn-confirm cart-btn-confirm" style="display:none" href="javascript:;">
					<span class="inner">我选好了</span>
				</a>
				<a class="j-cart-btn-unavail cart-btn-unavail">
					<span class="inner">点菜中</span>
				</a>
			</div>
		</div>
		</div>


		<!--购物车列表-->
		<div class="shop-cart"></div>
		<div class="cart-list">
			<div class="cart-header">
				<i class="cart-b">
                <div class="cart-n">6</div>
                </i>
			</div>
			<div class="popup-cart-actions">
				<button class="button popup-cart-clear-btn">清空购物车</button>
				<span>购物车</span>
			</div>

			<div class="native-scroll">
				<ul>
					<li>
						<div class="cart-item-name">情痴羊蝎子单品</div>
						<div class="cart-item-price">{$setting['currency']}
							<font>98.00</font>
						</div>
						<div class="cart-item-num">
							<i class="cart-item-add"></i>
							<span>1</span>
							<i class="cart-item-jj"></i>
						</div>
					</li>
					<li>
						<div class="cart-item-name">情痴羊蝎子单品</div>
						<div class="cart-item-price">{$setting['currency']}
							<font>98.00</font>
						</div>
						<div class="cart-item-num">
							<i class="cart-item-add"></i>
							<span>1</span>
							<i class="cart-item-jj"></i>
						</div>
					</li>
					<li>
						<div class="cart-item-name">情痴羊蝎子单品</div>
						<div class="cart-item-price">{$setting['currency']}
							<font>98.00</font>
						</div>
						<div class="cart-item-num">
							<i class="cart-item-add"></i>
							<span>1</span>
							<i class="cart-item-jj"></i>
						</div>
					</li>
					<li>
						<div class="cart-item-name">情痴羊蝎子单品</div>
						<div class="cart-item-price">{$setting['currency']}
							<font>98.00</font>
						</div>
						<div class="cart-item-num">
							<i class="cart-item-add"></i>
							<span>1</span>
							<i class="cart-item-jj"></i>
						</div>
					</li>
					<li>
						<div class="cart-item-name">情痴羊蝎子单品</div>
						<div class="cart-item-price">{$setting['currency']}
							<font>98.00</font>
						</div>
						<div class="cart-item-num">
							<i class="cart-item-add"></i>
							<span>1</span>
							<i class="cart-item-jj"></i>
						</div>
					</li>
					<li>
						<div class="cart-item-name">情痴羊蝎子单品</div>
						<div class="cart-item-price">{$setting['currency']}
							<font>98.00</font>
						</div>
						<div class="cart-item-num">
							<i class="cart-item-add"></i>
							<span>1</span>
							<i class="cart-item-jj"></i>
						</div>
					</li>

				</ul>
			</div>
			<div class="cart-footer">
				<div class="cart-fl">
					共 {$setting['currency']}<strong>588.00</strong>
				</div>
				<button>我选好了</button>
			</div>

		</div>

		<script src="{php echo $this->cur_mobile_path}/script/fly.min.js"></script>
		<script>
			$(document).scroll(function() {
				var ftop = $(document).scrollTop();
				var cate = 7; //菜单栏个数
				for(var i = 1; i < cate; i++) {
					var fheighti = $('.foodlistwrap h3').eq(i).offset();
					var hi = fheighti.top - 285;
					if(ftop > hi) {
						$('.tag').removeClass('focus')
						$('.tag').eq(i).addClass('focus')
					}
					if(i == 1) {
						if(ftop < hi) {
							$('.tag').removeClass('focus')
							$('.tag').eq(0).addClass('focus')
						}
					}
				}

			});
			$(function() {
				//导航菜单
				$('.tag').click(function(e) {
					var ind = $(this).index() //data-group-id
					var scroll_offset = $('.foodlistwrap h3').eq(ind).offset();
					$('html,body').animate({
						scrollTop: scroll_offset.top - 171 //让mainwrap的scrollTop等于pos的top，就实现了滚动
					}, 500);
				})

				var offset = $("#add-cart").offset();
				var lastClickTime = new Date().getTime();
				var delay = 1000; // 解决延迟 联系点击bug 
				$(".add-food").click(function(event) {
					if(new Date().getTime() - lastClickTime < delay) {
						return;
					}
					lastClickTime = new Date().getTime();

					var img = $(this).parent().parent().parent().find('img').attr('src'); //获取当前点击图片链接 
					var flyer = $('<img class="flyer-img" src="' + img + '">'); //抛物体对象				
					var sum = $(this).parent().find('.foodop-num').text();
					if(sum == 0) {
						sum = 1;
					} else {
						sum++
					}
					var fnum = $(this).parent().find('.foodop-num');
					var jian = $(this).parent().find('.remove-food');
					var car = $('#add-cart'); //改变购物车背景
					var cartnum = $('.cart-num'); //没有商品 空
					var carempty = $('.cart-empty'); //有商品
					var goodsprice = $(this).parent().next().find('font').text(); //商品单价
					var cartnoempty = $('.cart-noempty'); //总价格位置
					var totalprice = $('.cart-noempty').find('font').text(); //总价格
					if(totalprice != 0) {
						totalprice = parseInt(totalprice) + parseInt(goodsprice);
					} else {
						totalprice = goodsprice;
					}

					var cartbtnconfirm = $('.cart-btn-confirm'); //结算
					var cartbtnunavail = $('.cart-btn-unavail'); //差10元起送

					var total = $('.cart-num').text(); //总数
					total = parseInt(total) + 1;
					flyer.fly({
						start: {
							left: event.clientX - 25, //抛物体起点横坐标 
							top: event.clientY - 25 //抛物体起点纵坐标 
						},
						end: {
							left: offset.left + 10, //抛物体终点横坐标 
							top: offset.top + 20, //抛物体终点纵坐标 
						},
						onEnd: function() {
							fnum.css({
								"display": "block"
							}); ////成功加入购物车动画效果
							jian.css({
								"display": "block"
							});
							car.addClass('ico-cart-active'); //购物车背景
							cartnum.css({
								"display": "block"
							});
							carempty.css({
								"display": "none"
							}); //隐藏空空
							cartnoempty.css({
								"display": "block"
							});
							cartnoempty.find('font').text(totalprice) //总价
							cartbtnconfirm.css({
								"display": "block"
							}); //结算
							cartbtnunavail.css({
								"display": "none"
							}); //起送
							fnum.text(sum); //增加数量
							cartnum.text(total); //购物车商品总数
							this.destory(); //销毁抛物体 
						}
					});
				});

				$(".remove-food").click(function(event) {
					if(new Date().getTime() - lastClickTime < delay) {
						return;
					}
					lastClickTime = new Date().getTime();
					var fnum = $(this).parent().find('.foodop-num');
					var sum = $(this).parent().find('.foodop-num').text(); //商品数量
					var jian = $(this).parent().find('.remove-food');
					sum--;
					if(sum < 1) {
						fnum.css({
							"display": "none"
						});
						jian.css({
							"display": "none"
						});
					}
					fnum.text(sum)
					var cartnum = $('.cart-num').text(); //商品总数减1

					var car = $('#add-cart'); //改变购物车背景
					cartnum = cartnum - 1;
					if(cartnum < 1) {
						car.removeClass('ico-cart-active');
						$('.cart-num').css({
							"display": "none"
						})
					}
					$('.cart-num').text(cartnum);
					var totalprice = $('.cart-noempty').find('font').text(); //总价钱
					var goodsprice = $(this).parent().next().find('font').text(); //商品单价
					var carempty = $('.cart-empty'); //有商品
					var cartnoempty = $('.cart-noempty'); //总价格位
					var cartbtnconfirm = $('.cart-btn-confirm'); //结算
					var cartbtnunavail = $('.cart-btn-unavail'); //差10元起送
					totalprice = parseInt(totalprice) - parseInt(goodsprice);
					if(totalprice == 0) {
						carempty.css({
							"display": "block"
						});
						cartnoempty.css({
							"display": "none"
						});
						cartbtnunavail.css({
							"display": "block"
						}); //起送
						cartbtnconfirm.css({
							"display": "none"
						});
					}
					$('.cart-noempty').find('font').text(totalprice);

				});

				//计算购物车商品
				$('.cart-item-add').click(function(e) {
					var goodsnum = $(this).next().text();
					goodsnum = parseInt(goodsnum) + 1;
					$(this).next().text(goodsnum);

					var carttotal = $('.cart-fl strong').text() //总价
					var cartprice = $('.cart-item-price font').text() //单价
					carttotal = parseInt(carttotal) + parseInt(cartprice);
					$('.cart-fl strong').text(carttotal)
					var zongshu = $('.cart-n').text();
					zongshu = parseInt(zongshu) + 1;
					$('.cart-n').text(zongshu);
				});
				$('.cart-item-jj').click(function(e) {
					var goodsnum = $(this).prev().text();
					goodsnum = parseInt(goodsnum) - 1;
					$(this).prev().text(goodsnum);
					if(goodsnum == 0) {
						$(this).parent().parent().css({
							"display": "none"
						})
						$(this).next().text(0);
					}
					var carttotal = $('.cart-fl strong').text() //总价
					var cartprice = $('.cart-item-price font').text() //单价
					carttotal = parseInt(carttotal) - parseInt(cartprice);
					$('.cart-fl strong').text(carttotal)
					var zongshu = $('.cart-n').text();
					zongshu = parseInt(zongshu) - 1;
					if(zongshu == 0) {
						$('.shop-cart').css({
							"display": "none"
						})
						$('.cart-list').slideUp(200)
					}
					$('.cart-n').text(zongshu);
				});

				$('#add-cart').click(function(e) {
					var cartnum = $('.cart-num').text();
					if(cartnum > 0) {
						$('.shop-cart').css({
							"display": "block"
						});
						$('.cart-list').slideDown(400)
						$('.cart-list').css({
							"overflow": ""
						})
					}
				});
				$('.shop-cart').click(function(e) {
					$(this).css({
						"display": "none"
					})
					$('.cart-list').slideUp(200)

				});

			});
		</script>

		<div class="top-btn" style="display: block;">
			<a class="react">
				<i class="text-icon">⇧</i>
			</a>
		</div>
		<script>
			//top行为
			$('.top-btn').on('click', function() {
				$("html, body").animate({
					scrollTop: 0
				}, "slow");
			});
			if($(document).scrollTop() == 0) {
				$('.top-btn').css('display', 'none');
			}
			$(document).bind('scroll', function() {
				if($(document).scrollTop() == 0) {
					$('.top-btn').css('display', 'none');
				} else {
					$('.top-btn').css('display', 'block');
				}
			})
		</script>

		<script src="{php echo $this->cur_mobile_path}/script/fakeLoader.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".fakeloader").fakeLoader({
					timeToHide: 1200,
					bgColor: "#1abc9c",
					spinner: "spinner6"
				});
			});
		</script>
	</body>

</html>